<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box{
				width: 500px;
				display: flex;
				justify-content: space-around;/* 均匀分布 */
			}
			input[type="checkbox"]{
				display: none;/* 隐藏checkbox框 */
			}
			label{/* 设置样式 */
				position: relative;
				width: 50px;
				height: 26px;
				background: lightgray;
				cursor: pointer;/* 鼠标变手 */
				transition: background .3s;
				border-radius: 50px;
			}
			label[disabled]{
				cursor: not-allowed;/* 设置鼠标为禁止标志 */
				opacity: .5;/* 设置透明度 */
			}
			label::before,
			label::after{
				transition: all .3s;
				position: absolute;
			}
			label::before{/* 设置关字 */
				content: '关';
				font-size: 16px;
				line-height: 1;
				top: 5px;
				left: 28px;
				color: white;
			}
			label::after{/* 设置圆圈按钮 */
				content: '';
				top: 1px;
				left: 1px;
				width: 24px;
				height: 24px;
				border-radius: 12px;
				background: white;
			}
			input[type="checkbox"]:checked+label{/* 当点击了该按钮时背景变成粉色 */
				background: pink;
			}
			input[type="checkbox"]:checked+label::before{
				content: '开';
				left: 6px;
			}
			input[type="checkbox"]:active+label::after{
				width: 23px;/* 当选中时，圆圈移动 */
			}
			input[type="checkbox"]:checked+label::after{
				left: 25px;/* 当选中时，label向左移动 */
			}
		</style>
	</head>
	<body>
		<div class="box">
			<input type="checkbox" id="one" checked hidden>
			<label for="one"></label>
			<input type="checkbox" id="two" disabled hidden><!-- disabled不能选中 -->
			<label for="two" disabled></label>
			<input type="checkbox" id="three" hidden>
			<label for="three" disabled></label>
		</div>
	</body>
</html>
